<template>
  <div class="dialog-admin">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="title"
      width="1150px"
      @close="handleClose"
      :append-to-body="true"
      custom-class="dialog-copy"
    >
      <div class="tab-contain-position">
        <div class="tab-contain">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            @click="handleTabClick(index)"
          >
            <div>
              <el-button
                :class="localActiveIndex == index ? 'tabActive' : 'tabCustom'"
                size="mini"
                round
                ><svg-icon
                  :icon-class="item.icon"
                  style="margin-right: 5px; width: 13px; height: 15px"
                />{{ item.name }}</el-button
              >
            </div>
          </div>
        </div>
      </div>
      <div v-show="localActiveIndex == 0 && this.type != '批量控制'" class="Detail">
        <DetailComponent :activeIndexComponent="activeIndexComponent"></DetailComponent>
      </div>
      <div v-show="localActiveIndex == 1 || this.type == '批量控制'" class="Detail">
        <ControlComponent :activeIndexComponent="activeIndexComponent"></ControlComponent>
      </div>
      <div v-if="localActiveIndex == 2" class="Detail">
        <EnergyComponent></EnergyComponent>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DetailComponent from "./DeviceDetailComponent.vue";
import ControlComponent from "./DeviceControlComponent.vue";
import EnergyComponent from "./DeviceEnergyComponent.vue";
import { title } from "@/settings";
export default {
  name: "DialogAdmin",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    activeIndex: {
      type: Number,
      default: () => 0,
    },
  },
  components: { DetailComponent, ControlComponent, EnergyComponent },
  data() {
    return {
      tabList: [],
      localActiveIndex: this.activeIndex,
      title: "",
      type: "批量控制",
      activeIndexComponent: 0,
    };
  },
  watch: {
    // 监听 prop 变化，同步更新本地数据
    activeIndex(newVal) {
      this.localActiveIndex = newVal;
    },
    rowData: {
      handler(newVal) {
        if (newVal == null) {
          this.title = "批量控制";
          this.type = "批量控制";
          this.tabList = [{ name: "控制", icon: "table-control" }];
        } else {
          this.title = newVal.projectAdmin + " " + newVal.projectName;
          this.type = "";
          this.tabList = [
            { name: "详情", icon: "table-edit" },
            { name: "控制", icon: "table-control" },
            { name: "能耗", icon: "dashboard-9" },
          ];
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value; // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.$emit("close", val); // 当 dialogVisible 变化时，通知父组件更新
      },
    },
  },
  methods: {
    handleTabClick(index) {
      if (index == 1 && this.rowData.personInCharge == "离线") {
        this.$message({
          type: "warning",
          message: "设备已离线,无法操作!",
        });
        return;
      }
      this.localActiveIndex = index; // 修改本地数据而不是 prop
    },
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
      this.activeIndexComponent = Math.random();
      this.$emit("close"); // 发送关闭事件给父组件
    },
  },
};
</script>
<style lang="scss">
.dialog-copy {
  .tab-contain-position {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    position: absolute;
    top: 15px;
    right: 50px;
  }
  .tab-contain {
    display: flex;
    .tabActive,
    .tabCustom {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tabActive {
      width: 80px;
      padding: 8px 0;
      text-align: center;
      color: #063678;
      cursor: pointer;
    }
    .tabCustom {
      width: 80px;
      padding: 8px 0;
      border-radius: 50px;
      background: #063678;
      color: #fff;
      cursor: pointer;
      text-align: center;
    }
    .el-button {
      margin-right: 5px;
      border-color: #fff;
    }
  }
}
</style>
